<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>重复代码生成工具</title>
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        background-color: #567;
      }
      .box {
        height: calc(100% - 180px);
        padding: 60px;
        color: #fff;
        font-size: 20px;
        display: flex;
        flex-direction: column;
      }
      .box div {
        padding: 4px;
      }
      table input {
        width: 90%;
      }
      th,
      td {
        background-color: #fff4;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div style="display: flex">
        <label style="width: 500px"
          >参数分割用的字符串(就是你参数里不会出现的字符串)：
        </label>
        <input type="text" id="split" style="flex: 1" />
      </div>
      <table id="tb" width="100%" style="text-align: center">
        <tr>
          <th><button onclick="addrule()">添 加</button></th>
          <th>代码要替换的字符(替换后代码中不会出现)</th>
          <th>替换给代码的参数(多个用分割字符串隔开)</th>
        </tr>
        <tr>
          <td>第1种</td>
          <td><input type="text" id="split2-1" /></td>
          <td><input type="text" id="text-1" /></td>
        </tr>
      </table>

      <label>要替换的代码段(替换字符用分割字符替换)：</label>
      <textarea
        rows="8"
        id="text2"
        style="width: calc(100% - 10px); flex: 1"
      ></textarea>

      <div>
        <button onclick="click1()">转换</button>
        <button onclick="clear1()">清空</button>
        <button onclick="example()">示例</button>
      </div>

      <label>生成的代码段：</label>
      <textarea
        rows="20"
        id="output"
        style="flex: 2; width: calc(100% - 10px)"
      ></textarea>
      <footer style="text-align: right">
        ————重复代码生成工具1.0.1,Made by GuHun,2021年3月10日
      </footer>
    </div>
  </body>
</html>
<script>
  // 定义变量
  var split = document.getElementById("split"); //参数分隔符
  var text2 = document.getElementById("text2"); //代码模板段
  var output1 = document.getElementById("output"); //生成的代码
  var rulenum = 1; //规则行数
  var split2List = []; //代码分隔符列表
  var textList = []; //参数串列表
  var paramsList = []; //参数分隔好的列表

  // 创建新的一行
  function addrule() {
    rulenum++;
    //表格中新增一行
    document.getElementById("tb").innerHTML += `
        <tr>
          <td>第${rulenum}种</td>
          <td><input type="text" id="split2-${rulenum}"/></td>
          <td><input type="text" id="text-${rulenum}"/></td>
        </tr>`;
    arrList();
  }

  //例子初始化
  function begin1() {
    split.value = ",";
    split2List[0].value = "###";
    textList[0].value = "aaa,bbb,ccc,ddd";
    text2.value = '@JSONField(name = "###")\nprivate String $$$';
  }
  //拿出所有规则
  function arrList() {
    //先清空
    split2List = [];
    textList = [];
    paramsList = [];
    for (var i = 1; i <= rulenum; i++) {
      split2List.push(document.getElementById("split2-" + i));
      textList.push(document.getElementById("text-" + i));
    }
  }

  //格式化代码事件
  function click1() {
    //拿出所有规则
    arrList();
    //先清空再赋值
    paramsList = [];
    //分隔好参数
    for (var k in textList) {
      if (textList[k] == null) {
        continue;
      }
      paramsList.push(textList[k].value.split(split.value));
    }
    //定义输出内容
    var output = "";

    //进行规则匹配
    for (var i in paramsList[0]) {
      var code = text2.value;
      for (var j in paramsList) {
        var rule = split2List[j].value;
        code = code.replace(rule, paramsList[j][i] ? paramsList[j][i] : "");
      }
      output += code;
      output += "\n\n";
    }
    output1.value = output;
  }

  //清空文本域
  function clear1() {
    //清空输入框
    var clearList = document.getElementsByTagName("input");
    for (var i in clearList) {
      clearList[i].value = "";
    }
    //清空文本域
    clearList = document.getElementsByTagName("textarea");
    for (var i in clearList) {
      clearList[i].value = "";
    }
  }

  //展示示例
  function example() {
    //给第二行赋默认值
    split2List[1].value = "$$$";
    textList[1].value = "AAA,BBB,CCC,DDD";
    begin1();
    click1();
  }
  addrule();
  addrule();
  addrule();
  example();
</script>
